<template>
<div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1" @click="turnportal">个人中心</el-menu-item>
  <el-menu-item index="2" @click="turnhome">主页</el-menu-item>
  <el-menu-item index="3">我的收藏</el-menu-item>
</el-menu>
    <el-container>
        <el-main>
            <div class="icon-size"><i class="el-icon-location"></i>&nbsp;浏览记录</div>
            <div  style="position: relative;width: 1000px;height:650px;">
              <div style="width:1000px;margin:0 auto;">
                <el-table
                  :data="currentpaper"
                  height="460"
                  style="width: 100%"
                  :row-style="{height:'40px'}"
                  :cell-style="{padding:'0px'}">
                  <el-table-column
                    prop="visittime"
                    label="查看时间"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    prop="paperid"
                    label="论文编号"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    prop="papername"
                    label="文献标题"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    prop="paperauthor"
                    label="文献作者"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="200">
                    <template slot-scope="scope">
                      <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                         <el-button
          @click.native.prevent="deleteRow(scope.$index,  currentpaper)"
          type="text"
          size="small">
          删除记录
        </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <div class="block" style="text-align: center;position: absolute;top:50%;left:50%;margin-top: 200px;margin-left: -150px;">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="papertotal"
                  pager-count="5"
                  page-sizes="10"
                  :current-page="currentpage"
                  @current-change="changepage"
                >
                </el-pagination>
              </div>
          </div>
        </el-main>
    </el-container>
</div>
</template>

<script>
 export default{
     created(){
    //1.先把浏览器里存的信息填进数据
    this.userid=sessionStorage.getItem("userid");
    this.portalid=sessionStorage.getItem("portalid");
    //2.根据userid和portalid是否匹配决定页面样式
    //3.根据portalid确定ifget
    //4.根据portalid，要来对应的portalname、imgurl、introduction、paperForm和papertotal
    //5.初始化页面
    this.change_current_paper(1);
  },
    data(){
        return{
             userid:'',   //当前浏览器里保存的用户id
             portalid:'', //现在点进来的门户的id
             portalname:'施东成',//门户主人的姓名
          //imgurl:require('../assets/imgs/tks.png'),//头像的路径
             introduction:'  施东成是我国著名文史学家，担任南京文史馆馆长。',//个人简介
             ifget:'',  //是否认领了门户，1是，0否
             ifmyself:'',//是否本人，1是，0否
             papertotal:21,
             currentpage:1,
             currentpaper:[
            {
              paperid: '',//论文编号
              papername: '',//论文标题
              paperauthor: '',//论文作者
              papertime: '',//论文发表时间
              visittime:'',//查看时间
            }
          ],
          paperForm: [//论文表单
            {
              paperid: '1',//论文编号
              papername: '论文1',//论文标题
              paperauthor: '作者1',//论文作者
              papertime: '2001',//论文发表时间
            },
            {
              paperid: '2',//论文编号
              papername: '论文2',//论文标题
              paperauthor: '作者2',//论文作者
              papertime: '2002',//论文发表时间
            },
            {
              paperid: '3',//论文编号
              papername: '论文3',//论文标题
              paperauthor: '作者3',//论文作者
              papertime: '2003',//论文发表时间
            },
            {
              paperid: '4',//论文编号
              papername: '论文4',//论文标题
              paperauthor: '作者4',//论文作者
              papertime: '2004',//论文发表时间
            },
            {
              paperid: '5',//论文编号
              papername: '论文5',//论文标题
              paperauthor: '作者5',//论文作者
              papertime: '2005',//论文发表时间
            },
            {
              paperid: '6',//论文编号
              papername: '论文6',//论文标题
              paperauthor: '作者6',//论文作者
              papertime: '2006',//论文发表时间
            },
            {
              paperid: '7',//论文编号
              papername: '论文7',//论文标题
              paperauthor: '作者7',//论文作者
              papertime: '2007',//论文发表时间
            },
            {
              paperid: '8',//论文编号
              papername: '论文8',//论文标题
              paperauthor: '作者8',//论文作者
              papertime: '2008',//论文发表时间
            },
            {
              paperid: '9',//论文编号
              papername: '论文9',//论文标题
              paperauthor: '作者9',//论文作者
              papertime: '2009',//论文发表时间
            },
            {
              paperid: '10',//论文编号
              papername: '论文10',//论文标题
              paperauthor: '作者10',//论文作者
              papertime: '2010',//论文发表时间
            },
            {
              paperid: '11',//论文编号
              papername: '论文11',//论文标题
              paperauthor: '作者11',//论文作者
              papertime: '2011',//论文发表时间
            },
            {
              paperid: '12',//论文编号
              papername: '论文12',//论文标题
              paperauthor: '作者12',//论文作者
              papertime: '2012',//论文发表时间
            },
            {
              paperid: '13',//论文编号
              papername: '论文13',//论文标题
              paperauthor: '作者13',//论文作者
              papertime: '2013',//论文发表时间
            },
            {
              paperid: '14',//论文编号
              papername: '论文14',//论文标题
              paperauthor: '作者14',//论文作者
              papertime: '2014',//论文发表时间
            },
            {
              paperid: '15',//论文编号
              papername: '论文15',//论文标题
              paperauthor: '作者15',//论文作者
              papertime: '2015',//论文发表时间
            },
            {
              paperid: '16',//论文编号
              papername: '论文16',//论文标题
              paperauthor: '作者16',//论文作者
              papertime: '2016',//论文发表时间
            },
            {
              paperid: '17',//论文编号
              papername: '论文17',//论文标题
              paperauthor: '作者17',//论文作者
              papertime: '2017',//论文发表时间
            },
            {
              paperid: '18',//论文编号
              papername: '论文18',//论文标题
              paperauthor: '作者18',//论文作者
              papertime: '2018',//论文发表时间
            },
            {
              paperid: '19',//论文编号
              papername: '论文19',//论文标题
              paperauthor: '作者19',//论文作者
              papertime: '2019',//论文发表时间
            },
            {
              paperid: '20',//论文编号
              papername: '论文20',//论文标题
              paperauthor: '作者20',//论文作者
              papertime: '2020',//论文发表时间
            },
            {
              paperid: '21',//论文编号
              papername: '论文21',//论文标题
              paperauthor: '作者21',//论文作者
              papertime: '2021',//论文发表时间
            },

          ]
        }
    },
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
        console.log(key, keyPath);
    },
    turnhome(){
      this.$router.push('/Mainpage');
    },
    turnsearch(){
      this.$router.push('/Search');
    },
    turnportal(){
      this.$router.push('/Portal');
    },
    changepage(val){
      this.currentpage=val;
      this.change_current_paper(this.currentpage);
    },
    change_current_paper(val){//在某一页时，currentpaper里的内容换到当前页对应的
      this.currentpaper=[];
      if(val==1){
        if(this.papertotal<=10){
          
          for(var i=0;i<this.papertotal;i++){
            var a={
            paperid:'',
            papername:'',
            paperauthor:'',
            papertime:''
          };
            a.paperid=this.paperForm[i].paperid;
            a.papername=this.paperForm[i].papername;
            a.paperauthor=this.paperForm[i].paperauthor;
            a.papertime=this.paperForm[i].papertime;
            this.currentpaper.push(a)
          }
        }else{
          
          for(var i=0;i<10;i++){
            var a={
            paperid:'',
            papername:'',
            paperauthor:'',
            papertime:''
          };
            a.paperid=this.paperForm[i].paperid;
            a.papername=this.paperForm[i].papername;
            a.paperauthor=this.paperForm[i].paperauthor;
            a.papertime=this.paperForm[i].papertime;
            this.currentpaper.push(a);
          }
        }
      }else{
        var paperremain;
        paperremain=this.papertotal-10*(val-1);
        if(this.paperremain<=10){
        
          var j=10*(val-1);
          for(var i=j;i<(j+paperremain);i++){
            var a={
            paperid:'',
            papername:'',
            paperauthor:'',
            papertime:''
          };
            a.paperid=this.paperForm[i].paperid;
            a.papername=this.paperForm[i].papername;
            a.paperauthor=this.paperForm[i].paperauthor;
            a.papertime=this.paperForm[i].papertime;
            this.currentpaper.push(a);
          }
        }else{
          var j=10*(val-1);
          for(var i=j;i<j+10;i++){
            var a={
            paperid:'',
            papername:'',
            paperauthor:'',
            papertime:''
          };
            a.paperid=this.paperForm[i].paperid;
            a.papername=this.paperForm[i].papername;
            a.paperauthor=this.paperForm[i].paperauthor;
            a.papertime=this.paperForm[i].papertime;
            this.currentpaper.push(a);
          }
        }
      }
    }
    },

 }
</script>

<style>
  .box-card {
    width: 500px;
    height: 400px;
    padding: 15px;
    text-align: center;
  }
  .icon-size {
    font-size: 20px;
  }
  .el-breadcrumb{
    font-size: 20px;
  }
 
</style>
